<template>
    <div class="secure">
        <navtop title="安全中心" :fixed="true" />
        <div class="secure-bg"></div>
        <div class="secure-box">
            <div>
                <van-cell title="修改密码" isLink @click="openPasswordPopup" />
                <van-cell title="注销账号" isLink @click="destroyAccount" />
            </div>
        </div>
        <div class="btn-box">
            <van-button round block color="#0C34BA" @click="logout">退出登录</van-button>
        </div>
        <van-popup class="popup-box" closeable v-model:show="isOpen" position="bottom">
            <div class="popup-item">
                <div class="password-text">修改密码</div>
                <van-form @submit="confirmPassword">
                    <van-field v-for="(item, index) in passwords" :key="index"
                        :type="item.isPassword ? 'password' : 'text'" :label="item.title" placeholder="输入密码"
                        v-model="item.password" :right-icon="item.isPassword ? 'closed-eye' : 'eye-o'"
                        @click-right-icon="viewPassword(item)" autocomplete="off"
                        :rules="[{ required: true, message: '密码必填' }, { pattern: /^[A-Za-z]\w{5,15}$/, message: '密码支持数字字母下划线组合，且必须以字母开头，6-16位' }]" />
                    <div class="login-btn">
                        <van-button round block color="#0C34BA" native-type="submit">确认修改</van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts">

import request from '@/utils/request'

import { defineComponent, ref } from 'vue'

import navtop from "@/components/navtop.vue"

import { Dialog, Toast } from 'vant'

import { useRouter } from 'vue-router'

// import axios from 'axios'

export default defineComponent({
    components: {
        navtop
    },

    setup() {

        let router: any = useRouter();

        let isOpen: any = ref<boolean>(false);

        let passwords = ref<any>({
            old: {
                password: "",
                isPassword: true,
                title: "旧密码",
            },
            new: {
                password: "",
                isPassword: true,
                title: "新密码",
            },
        });

        //查看密码
        let viewPassword: (item: any) => void = (item: any): void => {
            item.isPassword = !item.isPassword;
        }

        //退出登录
        let logout: () => void = (): void => {
            Dialog
                .confirm({
                    title: "退出登录",
                    message: "是否确认退出登录！",
                    confirmButtonColor: "#0C34BA",
                })
                .then((): void => {

                    localStorage.removeItem("token");

                    setTimeout((): void => {
                        router.push({ name: "login" });
                    }, 1000);
                });
        }

        //修改密码
        let openPasswordPopup: () => void = (): void => {
            isOpen.value = true;
        }

        //确认修改密码
        let confirmPassword: () => void = (): void => {

            request.post("/updatePassword", {
                oldPassword: passwords.value.old.password,
                password: passwords.value.new.password
            })
                .then((result: any): void => {

                    Toast(result.data.msg);

                    if (result.data.code == "E001") {
                        localStorage.removeItem("token");
                        setTimeout((): void => {
                            router.push({ name: "login" });
                        }, 1000);
                    }
                })
                .catch((err: any): void => {
                    console.log(err);

                });
        }

        //注销账号
        let destroyAccount: () => void = (): void => {
            Dialog
                .confirm({
                    title: "注销账号",
                    message: "是否确认注销号，一旦确认无法恢复！",
                    confirmButtonColor: "#0C34BA",
                })
                .then((): void => {

                    request.post("/destroyAccount")
                        .then((result: any): void => {

                            Toast(result.data.msg);
                            if (result.data.code == "G001") {
                                localStorage.removeItem("token");
                                setTimeout(() => {
                                    router.push({ name: "login" });
                                }, 1000)

                            }
                        })
                        .catch((err: any): void => {
                            console.log(err);

                        });
                })
                .catch((err): void => {
                    console.log(err);

                });
        }

        return {
            isOpen,
            passwords,
            viewPassword,
            logout,
            openPasswordPopup,
            confirmPassword,
            destroyAccount
        }
    }
})
</script>

<style lang="less" scoped>
.secure {
    padding-top: 46px;

    :deep(.van-nav-bar__text) {
        color: #0C34BA;
    }

    :deep(.van-nav-bar .van-icon) {
        color: #0C34BA;
    }

    .secure-bg {
        height: 100px;
        background-color: #0C34BA;
    }

    .secure-box {
        margin: -30px 10px 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        padding: 10px;
    }

    .btn-box {
        margin-top: 100px;
        padding: 10px;
    }

    .password-text {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .popup-item {
        padding: 20px;
    }

    .login-btn {
        margin-top: 40px;
    }

    .popup-box {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}
</style>